<template>
    <div>
        <div id="main">
            <h1 class="title">帖子</h1>
            <div class="container cc">
                <div class="container-r">
                <div class="part_left">
                    <div id="thread_part">
                        <div id="thead_box_content" ref="thread" v-if="htmls" v-html="htmls"></div>
                        <!--<a href="javascript:;" class="loadmore" @click="loadMore()">查看更多</a>-->
                    </div>
                </div>
            </div>
            </div>
        </div>
        <!---->
    </div>
</template>
<script>
function debounce(func, wait, immediate) {//防抖函数
    let timeout;
    return function() {
        let context = this, args = arguments;
        let later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        let callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}
export default {
    name:'thread',
    layout:'index',
    head: {
        title: '游戏帖子'
    },
    data(){
        return{
            
        }
    },
    async asyncData({ store }){
        try {
            const {data} = await store.$axios.get('/bbs');
            return {
                htmls:data.html
            };/**/
        }catch(error){
            console.log(error);
        }
    },
    methods:{
        domToString (node) {  
            let i, a = document.createElement("div"),
                b = document.createDocumentFragment();
                a.innerHTML = node;
            while (i = a.firstChild) b.appendChild(i);
            return b;
        },
        loadMore(){
            try {
                this.$axios.get('/bbs').then(({data})=>{
                    const threadBox= this.$refs.thread,
                        tpl=this.domToString(data.html);
                    //console.log()
                    threadBox.appendChild(tpl)
                    
                })
            }catch(error){
                console.log(error);
            }
        },
        checkInView (t, e) {
            if (!t) return;
            var i = t.getBoundingClientRect() , a = e || 0;
            return i.top < window.innerHeight + a && i.bottom >= 0
        }
    },
    mounted(){
        this.$nextTick(() => {
            let myEfficientFn = debounce(()=>{//下拉防抖
                if(!this.$refs.thread) return;
                const last=this.$refs.thread.lastElementChild
                if(this.checkInView(last,100)){
                    this.loadMore()//下拉加载更多
                }
            },100);//
            window.addEventListener('scroll',myEfficientFn)
        })
    }
}
</script>
<style scoped>
.title{
    font-size: 25px;
    line-height: 3;
    text-align: center;

}
a:hover{text-decoration: none;}
</style>